<template>
	<view class="feedback">
		<view class="main">
			<p class="title">反馈类型：</p>
			<view class="button-list">
				<button class="mini-btn" type="default" size="mini" v-for="(item, index) in options" :key="index" :class="{ active: on==index }" @click="buttons(item.value,index)">
					{{ item.desp }}
				</button>
			</view>
			<p class="title">反馈内容：</p>
			<view class="textarea">
				<textarea cols="30" v-model="content" placeholder="欢迎反馈任何意见和问题，您的反馈也是我们产品进步的动力哦！"></textarea>
				<view class="up-img">
					<view class="ul">
						<view class="li" v-for="(item, index) in img_list" :key="index">
							<image :src="item" mode=""></image>
							<uni-icons type="clear" size="24" class="topright" color="#999" @click="removerimg(index)" />
						</view>
						<view class="li" @click="findimg()"><text>+</text></view>
					</view>
				</view>
			</view>

			<view class="drag">
				<view class="drag_text">{{ confirmWords }}</view>
				<slider value="0" @change="sliderChange" step="2" @changing="changing" class="slider" />
				<view class="pathway">
					<view class="pathwayl" v-bind:style="{ width: beginClientX }">
						<view :class="{ handler_ok_bg: confirmSuccess }" class="handler handler_bg"><image src="/static/img/drag.png" /></view>
					</view>
				</view>
			</view>
			<view class="button" @click="save()">提 交</view>
		</view>
	</view>
</template>

<script>
import { uniIcons } from '@dcloudio/uni-ui';
import feedback from '../../../servers/my/feedback.js';
export default {
	components: { uniIcons },
	data() {
		return {
			checkerList: [],
			content: '',
			options: [],
			beginClientX: 0 /* 距离屏幕左端距离 */,
			confirmWords: '拖动滑块验证' /* 滑块文字 */,
			windowWidth: 0,
			confirmSuccess: false /* 验证成功判断 */,
			img_list: [],
			upimg_list: [],
			type: 2 /* 反饋類型 */,
			// 上传图片
			img_view_prefix: this.imgCDNUrl,
			on:'',
			index:0
		};
	},
	mounted() {
		//反饋類型初始化
		feedback
			.initData()
			.then(res => {
				this.options = res.data;
			})
			.catch(err => {
				console.log(new Error('请检查网络后重试'));
			});
			
	},
	methods: {
		save() {
			if (this.confirmSuccess) {
				if (this.type === '') {
					uni.showToast({
						title: '请选择反馈类型',
						icon: 'none'
					});
					return;
				}
				if (this.content === '') {
					uni.showToast({
						title: '请输入反馈内容',
						icon: 'none'
					});
					return;
				}
				//TODO 回头替换该的图片上传地址
				//this.upimg_list=[323423432423,56565656,3,11321321321]
				var obj = { type: this.type, content: this.content, imgs: this.upimg_list.join(',') };
				feedback
					.save(obj)
					.then(res => {
						if (res.code == 200) {
							uni.redirectTo({
								url: '/pages/shop/my/feedback_ok'
							});
						} else {
							uni.showToast({
								title: '保存失败，请联系管理员'
							});
						}
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
			} else {
				uni.showToast({
					title: '请先验证谢谢！',
					icon: 'none'
				});
			}
		},
		filesOK1(files) {
			console.log(files);
		},
		filesadded(files) {
			let hasIgnore = false;
			const maxSize = 1 * 1024 * 1024; // 1M
			for (let k in files) {
				const file = files[k];
				if (file.size > maxSize) {
					file.ignore = true;
					hasIgnore = true;
				}
			}
			hasIgnore &&
				this.$createToast({
					type: 'warn',
					time: 1000,
					txt: 'You selected >1M files'
				}).show();
		},
		sliderChange(e) {
			console.log('value 发生变化：' + e.detail.value);
			if (e.detail.value > 95) {
				this.confirmSuccess = true;
				this.confirmWords = '验证通过';
			}
		},
		changing(e) {
			console.log('value 发生变化：' + e.detail.value);
			this.beginClientX = e.detail.value + '%';
		},
		buttons(e,idx) {
			this.type = e;
			this.on=idx
			
			console.log(this.type,this.on)
		},
		findimg() {
			var that = this;
			uni.chooseImage({
				count: 3, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function(res) {
					that.img_list = that.img_list.concat(res.tempFilePaths);
					console.log(JSON.stringify(res.tempFilePaths));
					for(var i=0;i<that.img_list.length;i++){
						that.upload(that.img_list[i])
					}
					// uni.uploadFile({
					// 	url: that.upFileUrl, //上传地址
					// 	filePath: that.img_list[0], //上传图片本地地址
					// 	name: 'file',
					// 	formData: {
					// 		user: 'test'
					// 	},
					// 	success: uploadFileRes => {
					// 		that.upimg_list.push(uploadFileRes.msg); //返回线上图片地址
					// 	}
					// });
				}
			});
		},
		upload(filePath){
			var that=this;
			uni.uploadFile({
				url: that.upFileUrl, //上传地址
				filePath: filePath, //上传图片本地地址
				name: 'file',
				formData: {
					user: 'test'
				},
				success: uploadFileRes => {
					
					that.upimg_list.push(JSON.parse(uploadFileRes.data).data); //返回线上图片地址
					 console.log(that.upimg_list )
				}
			});
		},
		removerimg(e) {
			this.img_list.splice(e, 1);
		}
	}
};
</script>

<style lang="less" scoped>
.feedback {
	height: 100%;
	background: #fff;
	padding-bottom: 30rpx;
	.main {
		// position: absolute;
		// top: 80rpx;
		// bottom: 0;
		// width: 100%;
		// overflow: auto;
		padding-bottom: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		.title {
			padding-top: 52rpx;
		}
		.button-list {
			.mini-btn {
				font-size: 24rpx;
				margin-top: 34rpx;
				margin-right: 25rpx;
				width: 158rpx;
				line-height: 66rpx;
				color: #666666;
				background-color: #fff;
				padding: 0;
			}
			.cube-checker-item::after {
				border-color: #dedede;
				border-radius: 8rpx;
			}
			.mini-btn.active {
				color: #bd3c8c;
				background: #fff;
			}
			.mini-btn.active::after {
				border-color: #bd3c8c;
			}
		}
		.textarea {
			padding: 20rpx;
			margin-top: 20rpx;
			box-shadow: 5rpx 0 30rpx rgba(225, 225, 225, 0.93);
			border-radius: 10rpx;
			textarea {
				width: 100%;
				height: 360rpx;
				border: none;
			}
			.ul {
				overflow: hidden;
				.li {
					position: relative;
					float: left;
					width: 189rpx;
					height: 189rpx;
					border: 1rpx dashed #e1e1e1; /*no*/
					text-align: center;
					line-height: 189rpx;
					font-size: 60rpx;
					color: #e1e1e1;
					font-weight: 100;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					image {
						width: 189rpx;
						height: 189rpx;
					}
					.topright {
						position: absolute;
						top: 5rpx;
						right: 5rpx;
						line-height: 50rpx;
					}
				}
			}
		}
		.drag {
			position: relative;
			background-color: #fff;
			margin-top: 50rpx;
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			text-align: center;
			border: 1px solid #bd3c8c; /*no*/
			border-radius: 45rpx;
			overflow: hidden;
			.slider {
				position: absolute;
				left: 45rpx;
				right: 45rpx;
				opacity: 0;
				z-index: 9;
			}
			.pathway {
				// width: 100%;
				background: #000;
				margin: 20rpx 18px;
				.pathwayl {
					width: 0;
					position: relative;
				}
			}
			.handler {
				position: absolute;
				top: -12rpx;
				right: -60rpx;
				width: 118rpx;
				height: 70rpx;
				line-height: 70rpx;
				background-color: #bd3c8c;
				border-radius: 35rpx;
				color: #fff;
				text-align: center;
				cursor: move;
			}
			.handler_bg {
				image {
					width: 29rpx;
					height: 29rpx;
				}
			}
			.handler_ok_bg {
				display: none;
			}
			.drag_bg {
				background-color: #bd3c8c;
				height: 90rpx;
				width: 0rpx;
				opacity: 0;
			}
			.drag_text {
				position: absolute;
				top: 0rpx;
				left: 0rpx;
				right: 0rpx;
				text-align: center;
				color: #bd3c8c;
			}
		}
		.button {
			margin: 50rpx 0 0;
			line-height: 90rpx;
			background: linear-gradient(80deg, #d2158a, #fc6395);
			text-align: center;
			color: #fff;
			border-radius: 45rpx;
			font-size: 32rpx;
			box-shadow: 3rpx 0 20rpx rgba(206, 205, 204, 0.35);
		}
	}
}
</style>
